import { useQuasar } from '@teld/q-components';
import useMappingProps from 't/common/hooks/useMappingProps';
import { commonProps, createNameSpace } from 't/common/utils';
import { defineComponent } from 'vue';
import LabelPrefixWraper from '../label-prefix-wraper';
import './index.scss';

export default defineComponent({
  name: createNameSpace('help'),
  props: {
    ...commonProps,
    ...LabelPrefixWraper.props,
    demo: {
      type: String,
      default() {
        return '';
      },
    },
    linkType: {
      // 定义规则不是前端定义的，是根据历史包袱，兼容旧时代的产物
      type: String,
      default() {
        return ['open', 'openDia'][1];
      },
    },
    hrefType: {
      type: String,
      default() {
        return ['static', 'expression'][0];
      },
    },
    href: String,
    hrefExp: String,
    isLinkTargetBlank: {
      type: Boolean,
      default() {
        return true;
      },
    },
    diaInfo: String,
    hasPopover: {
      type: Boolean,
      default() {
        return false;
      },
    },
    helpConf: {
      type: Boolean,
      default() {
        return true;
      },
    },
    content: String,
    placement: String,
    effect: {
      type: String,
      default() {
        return 'dark';
      },
    },
    icon: String,
    inBody: {
      type: Boolean,
      default() {
        return false;
      },
    },
    maxHeight: String,
    maxWidth: String
  },

  emits: ['click'],

  setup(props, { attrs, emit, expose, slots }) {
    const [mappingProps, mappingExpose] = useMappingProps(props);
    const $q = useQuasar();

    expose(mappingExpose);

    // watch(
    //   () => props,
    //   (a, b) => {},
    //   {
    //     immediate: true,
    //     deep: true,
    //   },
    // );

    function onClickHandler(e) {
      emit('click', e);

      if (mappingProps.linkType === 'open') {
        const href =
          mappingProps.hrefType === 'static'
            ? mappingProps.href
            : mappingProps.hrefExp;
        if (href) {
          window.open(
            href,
            mappingProps.isLinkTargetBlank ? '_block' : '_self',
          );
        }
      } else {
        if (mappingProps.diaInfo) {
          $q.dialog({
            // title: 'Confirm',
            message: mappingProps.diaInfo,
            cancel: false,
            persistent: false,
          })
            ?.then?.(() => {
              // 用户点击了确认按钮
              console.log('Confirmed');
            })
            ?.catch?.(() => {
              // 用户点击了取消按钮或者关闭了对话框
              console.log('Cancelled');
            });
        }
      }
    }

    return () => {
      return (
        <LabelPrefixWraper
          class={'help-link'}
          v-show={mappingProps.visible}
          required={mappingProps.required}
          labelProps={{ class: 'help-link' }}
          label={mappingProps.label || '问号帮助'}
          labelType='help'
          hideLabel={mappingProps.hideLabel}
          labelPosition={mappingProps.labelPosition}
          helpConf={mappingProps.helpConf}
          maxHeight={mappingProps.maxHeight}
          maxWidth={mappingProps.maxWidth}
          helpTooltip={mappingProps.content || mappingProps.helpTooltip}
          helpPlacement={mappingProps.placement || mappingProps.helpPlacement}
          helpMore={mappingProps.helpMore}
          helpMorePopup={mappingProps.helpMorePopup}
          helpMoreLink={mappingProps.helpMoreLink}
          helpMoreLinkHrefStatic={mappingProps.helpMoreLinkHrefStatic}
          helpMoreLinkHrefExp={mappingProps.helpMoreLinkHrefExp}
          helpEffect={mappingProps.effect}
          onHelpClickHandler={onClickHandler}
          icon={mappingProps.icon}
          inBody={mappingProps.inBody}
        ></LabelPrefixWraper>
      );
    };
  },
});
